<template>
	<view>
		<view class="app-background"></view>
		<my-navbar title="个人资料" :border="true"></my-navbar>
		<view class="myDetail-content">
			<view class="content-item" hover-class="button-hover" @click="clickInfoItem('photo')">
				<view class="item-label">头像</view>
				<image class="item-photo" :src="jxyUserInfo.photo ? jxyUserInfo.photo : '/static/index/headicon_none.png'" mode="aspectFit"></image>
			</view>
			<view class="content-item" hover-class="button-hover" @click="clickInfoItem('name')">
				<view class="item-label">姓名</view>
				<view class="item-value">
					<text v-if="jxyUserInfo.name">{{ jxyUserInfo.name }}</text>
					<text v-else>--</text>
				</view>
			</view>
			<view class="content-item" hover-class="button-hover" @click="clickInfoItem('sex')">
				<view class="item-label">性别</view>
				<view class="item-value">
					<template v-if="jxyUserInfo.sex === undefined">
						<text>--</text>
					</template>
					<template v-else>
						<text v-if="jxyUserInfo.sex">{{ jxyUserInfo.sex }}</text>
						<text v-else>保密</text>
					</template>
				</view>
			</view>
			<view class="content-item" hover-class="button-hover" @click="clickInfoItem('subject')">
				<view class="item-label">学科</view>
				<view class="item-value">
					<text v-if="jxyUserInfo.teachSubject">{{ jxyUserInfo.teachSubject }}</text>
					<text v-else>--</text>
				</view>
			</view>
			<view class="content-item none-icon" @click="clickInfoItem('school')">
				<view class="item-label">学校</view>
				<view class="item-value">
					<text v-if="jxyUserInfo.schoolName">{{ jxyUserInfo.schoolName }}</text>
					<text v-else>--</text>
				</view>
			</view>
		</view>
		<!-- 浮动底部 START -->
		<view class="app-offset">
			<view class="userDetail-button"></view>
			<safe-area></safe-area>
		</view>
		<view class="app-fixed-bottom" style="background-color: #FFFFFF;">
			<view class="userDetail-button primary app-button" hover-class="hover" @click="clickLogoutButton">退出登录</view>
			<safe-area></safe-area>
		</view>
		<!-- 浮动底部 END -->
		<template>
			<my-popup :custom="2" :show="p_sex.show" @handle="p_sex.handle">
				<view class="page-popup popup1">
					<view class="popup-title">
						<view class="title-center">请选择</view>
						<view class="title-side"><image class="side-icon" src="/static/img/icon_close.png" @click="p_sex.clickClose"></image></view>
					</view>
					<scroll-view class="popup1-content" :scroll-y="true">
						<view class="content-item" hover-class="button-hover" @click="p_sex.clickItem('男')">男</view>
						<view class="content-item" hover-class="button-hover" @click="p_sex.clickItem('女')">女</view>
						<safe-area></safe-area>
					</scroll-view>
				</view>
			</my-popup>
			<my-popup :custom="1" :show="p_name.show" @handle="p_name.handle">
				<view class="popup2">
					<input class="popup2-input" type="text" placeholder="请填写真实姓名" placeholder-style="color: #C3C3C3;" v-model="p_name.name" :maxlength="12" />
					<view class="popup2-buttons">
						<view class="button-item" @click="p_name.clickButton(0)">取消</view>
						<view class="button-item primary" @click="p_name.clickButton(1)">确定</view>
					</view>
				</view>
			</my-popup>
		</template>
	</view>
</template>

<script>
import { mapState, mapActions } from 'vuex';
export default {
	data() {
		return {
			p_sex: {
				show: false,
				handle: fn => {
					if (fn === 'clickMask') this.p_sex.show = false;
				},
				clickClose: () => {
					this.p_sex.show = false;
				},
				clickItem: async sex => {
					this.p_sex.show = false;
					uni.showLoading({
						mask: true
					});
					let res1;
					try {
						res1 = await this.$api.user.set_teacher_info({ sex });
					} catch (err) {
						uni.hideLoading();
						this.$showToast(err.message || '保存失败');
						return;
					}
					uni.hideLoading();
					this.$showToast('保存成功');
					try {
						this.updateJxyUserInfo();
					} catch (err) {}
				}
			},
			p_name: {
				show: false,
				name: '',
				handle: fn => {
					if (fn === 'clickMask') this.p_name.show = false;
				},
				clickButton: async id => {
					this.p_name.show = false;
					if (id == 0) return;
					uni.showLoading({
						mask: true
					});
					let res1;
					try {
						res1 = await this.$api.user.set_teacher_info({ name: this.p_name.name });
					} catch (err) {
						uni.hideLoading();
						this.$showToast(err.message || '保存失败');
						return;
					}
					uni.hideLoading();
					this.$showToast('保存成功');
					try {
						this.updateJxyUserInfo();
					} catch (err) {}
				}
			}
		};
	},
	computed: {
		...mapState({
			userProfile: state => state.User.userInfo.userProfile,
			jxyUserInfo: state => state.User.userInfo.jxyUserInfo
		})
	},
	methods: {
		...mapActions(['updateJxyUserInfo']),
		async clickInfoItem(id) {
			switch (id) {
				case 'photo':
					let res1;
					try {
						res1 = await uni.getUserProfile({
							desc: '用于完善用户信息'
						});
						if (res1[0]) throw res1[0];
						res1 = res1[1];
					} catch (err) {
						return;
					}
					this.$store.commit('ALL_USERS_SUCCESS', { userProfile: res1 });
					uni.showLoading({
						mask: true
					});
					try {
						await this.setTeacherPhoto();
					} catch (err) {
						uni.hideLoading();
						this.$showToast('保存失败');
						return;
					}
					uni.hideLoading();
					this.$showToast('保存成功');
					try {
						this.updateJxyUserInfo();
					} catch (err) {}
					return;
				case 'name':
					this.p_name.name = this.jxyUserInfo.name;
					this.p_name.show = true;
					return;
				case 'sex':
					this.p_sex.show = true;
					return;
				case 'subject':
					uni.navigateTo({
						url: '/packageA/pages/my/selectSubject'
					});
					return;
				case 'school':
					this.$showToast('学校不可修改，如需修改请联系客服')
					return
			}
		},
		setTeacherPhoto() {
			return new Promise(async (reslove, reject) => {
				let res1;
				try {
					res1 = await this.$api.common.download_file1(this.userProfile.userInfo.avatarUrl);
				} catch (err) {
					reject();
					return;
				}
				const formData = {
					type: 'app/teacher/photo',
					nickName: this.userProfile.userInfo.nickName
				};
				const res2 = await this.$api.common.upload_files1({
					formData,
					filePath: res1.tempFilePath
				});
				const data = {
					nickName: this.userProfile.userInfo.nickName
				};
				if (res2.successCount) data.photo = res2.successData[0].absolutePath;
				let res3;
				try {
					res3 = await this.$api.user.set_teacher_info(data);
				} catch (err) {
					reject();
					return;
				}
				reslove();
			});
		},
		//退出登录
		async clickLogoutButton() {
			uni.showLoading({
				mask: true
			});
			try {
				await this.$api.user.logout();
			} catch (err) {}
			this.$store.commit('ALL_USERS_SUCCESS', { userProfile: {}, jxyUserInfo: {}, wxUserId: {} });
			uni.hideLoading();
			uni.reLaunch({
				url: '/pages/index/index'
			});
		}
	},
	async onPullDownRefresh() {
		uni.showLoading({
			mask: true
		});
		try {
			await this.updateJxyUserInfo();
		} catch (err) {
			uni.hideLoading();
			this.$showToast(err.message || '更新失败');
			return;
		}
		uni.hideLoading();
		uni.stopPullDownRefresh();
	}
};
</script>

<style lang="less" scoped>
.myDetail-content {
	background-color: #ffffff;
	.content-item {
		height: 120rpx;
		padding-left: 30rpx;
		padding-right: 40rpx;

		transition: all 0.3s;

		display: flex;
		align-items: center;

		position: relative;

		&::before {
			content: '';
			width: 100%;
			border-bottom: 2rpx solid #e3e4e6;
			position: absolute;
			bottom: 0;
		}

		&::after {
			content: '';
			width: 14rpx;
			height: 24rpx;
			background-image: url(/static/index/icon_right.png);
			background-size: 100%;
			background-repeat: no-repeat;
			margin-left: 20rpx;
		}

		&.none-icon {
			&::after {
				visibility: hidden;
			}
		}

		&:last-child {
			&::before {
				border-bottom: none;
			}
		}

		.item-label {
			flex: 1;
			font-size: 32rpx;
			font-weight: 500;
			color: #222222;
		}

		.item-photo {
			width: 84rpx;
			height: 84rpx;
			border-radius: 50%;
		}

		.item-value {
			font-size: 28rpx;
			color: #808080;
		}
	}
}

.page-popup {
	background-color: #ffffff;
	border-radius: 30rpx 30rpx 0 0;

	display: flex;
	flex-direction: column;

	.popup-title {
		height: 120rpx;
		border-bottom: 2rpx solid #e3e4e6;

		position: relative;

		font-size: 36rpx;
		color: #222222;

		display: flex;
		align-items: center;
		justify-content: flex-end;

		.title-center {
			text-align: center;

			position: absolute;
			left: 0;
			right: 0;
		}

		.title-side {
			z-index: 1;

			position: absolute;
			left: 0;
			right: 0;

			display: flex;
			align-items: center;

			.side-icon {
				transition: all 0.3s;

				&:active {
					opacity: 0.5;
				}
			}
		}
	}
}

.popup1 {
	.title-side {
		justify-content: flex-end;

		.side-icon {
			width: 24rpx;
			height: 24rpx;
			padding: 30rpx;
		}
	}

	.popup1-content {
		flex: 1;
		font-size: 32rpx;
		color: #222222;
		overflow: hidden;

		.content-item {
			line-height: 120rpx;
			padding-left: 30rpx;

			transition: all 0.3s;

			&::after {
				content: '';

				width: 100%;
				display: block;
				border-bottom: 2rpx solid #e3e4e6;
			}
		}
	}
}

.popup2 {
	width: 594rpx;
	border-radius: 30rpx;
	background-color: #ffffff;
	padding: 0 30rpx;

	.popup2-input {
		font-size: 32rpx;
		border-bottom: 2rpx solid #ff6600;

		padding-top: 50rpx;
		padding-bottom: 20rpx;
	}

	.popup2-buttons {
		display: flex;
		justify-content: flex-end;
		line-height: 120rpx;

		.button-item {
			padding-left: 80rpx;

			transition: all 0.3s;

			font-size: 32rpx;
			color: #222222;

			&.primary {
				color: #ff6600;
			}

			&:active {
				opacity: 0.5;
			}
		}
	}
}

.userDetail-button {
	height: 88rpx;
	border-radius: 44rpx;
	background-color: #eeeeee;
	margin: 0 30rpx 30rpx 30rpx;

	font-size: 32rpx;
	color: #222222;

	display: flex;
	justify-content: center;
	align-items: center;

	&.primary {
		background-color: #ff6600;
		color: #ffffff;
	}
}
</style>
